<template>
    <div class="header_container">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/manager' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(item, index) in $route.meta"
                                :key="index">{{item}}</el-breadcrumb-item>
        </el-breadcrumb>
        <el-dropdown @command="handleCommand"
                     placement='start'>
            <img :src="baseImgPath + adminInfo.avatar"
                 class="avator">
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="home">首页</el-dropdown-item>
                <el-dropdown-item command="signout">退出</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
import { signout } from '@/api/getData'
import { baseImgPath } from '@/config/env'
import { mapActions, mapState } from 'vuex'

export default {
    data () {
        return {
            baseImgPath,
        }
    },
    created () {
        if (!this.adminInfo.id) {
            this.getAdminData()
        }
    },
    computed: {
        ...mapState(['adminInfo']),
    },
    methods: {
        ...mapActions(['getAdminData']),
        async handleCommand (command) {
            if (command == 'home') {
                this.$router.push('/manager');
            } else if (command == 'signout') {
                const res = await signout()
                if (res.status == 1) {
                    this.$message({
                        type: 'success',
                        message: '退出成功'
                    });
                    this.$router.push('/');
                } else {
                    this.$message({
                        type: 'error',
                        message: res.message
                    });
                }
            }
        },
    }
}
</script>

<style lang="less">
@import "../style/mixin";
.header_container {
    background-color: #eff2f7;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
}
.avator {
    .wh(36px, 36px);
    border-radius: 50%;
    margin-right: 37px;
}
.el-dropdown-menu__item {
    text-align: center;
}
</style>
